<template>
    <div>
      <!--
      <div v-on:click="toolbarAction('zoomin')" class="clickable iconfont fg-yellow noselect zoom-ctrl" title="Zoom in">
        <svg viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg"
             width="12" height="12">
          <path d="M11.625 4.5h-4.125v-4.125c0-0.207-0.168-0.375-0.375-0.375h-2.25c-0.207 0-0.375 0.168-0.375 0.375v4.125h-4.125c-0.207 0-0.375 0.168-0.375 0.375v2.25c0 0.207 0.168 0.375 0.375 0.375h4.125v4.125c0 0.207 0.168 0.375 0.375 0.375h2.25c0.207 0 0.375-0.168 0.375-0.375v-4.125h4.125c0.207 0 0.375-0.168 0.375-0.375v-2.25c0-0.207-0.168-0.375-0.375-0.375z"
                fill="#ffffff"></path>
        </svg>
      </div>
      <div v-on:click="toolbarAction('zoomout')" class="clickable iconfont fg-yellow noselect zoom-ctrl" title="Zoom out">
        <svg viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg"
             width="12" height="12">
          <path d="M0 4.875v2.25c0 0.207 0.168 0.375 0.375 0.375h11.25c0.207 0 0.375-0.168 0.375-0.375v-2.25c0-0.207-0.168-0.375-0.375-0.375h-11.25c-0.207 0-0.375 0.168-0.375 0.375z"
                fill="#ffffff"></path>
        </svg>
      </div>

      <div onclick="showLayerControl()" class="clickable iconfont fg-yellow noselect zoom-ctrl"
           title="Layer control">
        <svg viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg"
             width="12" height="12">
          <path d="M12 3.75l-6-3-6 3 6 3 6-3zM6 1.746l4.008 2.004-4.008 2.004-4.008-2.004 4.008-2.004zM10.798 5.399l1.202 0.601-6 3-6-3 1.202-0.601 4.798 2.399zM10.798 7.649l1.202 0.601-6 3-6-3 1.202-0.601 4.798 2.399z"
                fill="#ffffff"></path>
        </svg>
      </div>
      -->

      <div v-on:click="toolbarAction('grade')" class="clickable iconfont fg-yellow noselect zoom-ctrl"
           title="Layer Grade">
        <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="12" height="12">
          <path d="M960.659 55.024c-7.549-4.664-16.971-5.088-24.907-1.122l-295.752 147.875-295.752-147.875c-7.206-3.603-15.691-3.603-22.898 0l-307.2 153.6c-8.672 4.336-14.15 13.2-14.15 22.898v768c0 8.872 4.594 17.112 12.141 21.776 4.11 2.541 8.779 3.824 13.461 3.824 3.912 0 7.834-0.898 11.446-2.702l295.752-147.875 295.752 147.875c7.206 3.603 15.693 3.603 22.899 0l307.2-153.6c8.674-4.336 14.152-13.2 14.152-22.898v-768c-0.003-8.872-4.597-17.112-12.144-21.776zM307.2 828.978l-256 128v-710.755l256-128v710.755zM358.4 118.222l256 128v710.757l-256-128v-710.757zM921.6 828.978l-256 128v-710.755l256-128v710.755z"
                fill="#ffffff"></path>
        </svg>
      </div>

      <div v-on:click="toolbarAction('lai')" class="clickable iconfont fg-yellow noselect zoom-ctrl"
           title="Layer LAI">
        <svg viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg"
             width="12" height="12">
          <path d="M11.851 1.576c-1.298-0.984-3.295-1.571-5.343-1.571-2.533 0-4.596 0.884-5.662 2.426-0.5 0.724-0.777 1.582-0.823 2.549-0.040 0.861 0.104 1.813 0.43 2.838 1.112-3.333 4.217-5.943 7.796-5.943 0 0-3.35 0.882-5.455 3.612-0.001 0.002-0.029 0.036-0.078 0.102-0.423 0.566-0.791 1.209-1.067 1.937-0.467 1.111-0.9 2.636-0.9 4.474h1.5c0 0-0.228-1.432 0.168-3.080 0.655 0.089 1.241 0.132 1.768 0.132 1.379 0 2.36-0.298 3.087-0.939 0.651-0.574 1.010-1.345 1.39-2.162 0.58-1.247 1.238-2.66 3.148-3.752 0.109-0.062 0.18-0.176 0.188-0.301s-0.047-0.247-0.148-0.323z"
                fill="#ffffff"></path>
        </svg>
      </div>

      <div v-on:click="toolbarAction('lst')"
           class="clickable iconfont fg-yellow noselect zoom-ctrl"
           title="Soil temperature">
        <svg viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"
             width="12" height="12">
          <path d="M12 19.5c0.828 0 1.5 0.672 1.5 1.5v1.5c0 0.828-0.672 1.5-1.5 1.5s-1.5-0.672-1.5-1.5v-1.5c0-0.828 0.672-1.5 1.5-1.5zM12 4.5c-0.828 0-1.5-0.672-1.5-1.5v-1.5c0-0.828 0.672-1.5 1.5-1.5s1.5 0.672 1.5 1.5v1.5c0 0.828-0.672 1.5-1.5 1.5zM22.5 10.5c0.828 0 1.5 0.672 1.5 1.5s-0.672 1.5-1.5 1.5h-1.5c-0.828 0-1.5-0.672-1.5-1.5s0.672-1.5 1.5-1.5h1.5zM4.5 12c0 0.828-0.672 1.5-1.5 1.5h-1.5c-0.828 0-1.5-0.672-1.5-1.5s0.672-1.5 1.5-1.5h1.5c0.828 0 1.5 0.672 1.5 1.5zM19.425 17.303l1.061 1.061c0.586 0.586 0.586 1.536 0 2.121s-1.536 0.586-2.121 0l-1.061-1.061c-0.586-0.586-0.586-1.536 0-2.121s1.536-0.586 2.121 0zM4.575 6.697l-1.061-1.061c-0.586-0.586-0.586-1.536 0-2.121s1.536-0.586 2.121 0l1.061 1.061c0.586 0.586 0.586 1.536 0 2.121s-1.536 0.586-2.121 0zM19.425 6.697c-0.586 0.586-1.536 0.586-2.121 0s-0.586-1.536 0-2.121l1.061-1.061c0.586-0.586 1.536-0.586 2.121 0s0.586 1.536 0 2.121l-1.061 1.061zM4.575 17.303c0.586-0.586 1.536-0.586 2.121 0s0.586 1.536 0 2.121l-1.061 1.061c-0.586 0.586-1.536 0.586-2.121 0s-0.586-1.536 0-2.121l1.061-1.061z"
                fill="#ffffff"></path>
          <path d="M12 6c-3.314 0-6 2.686-6 6s2.686 6 6 6c3.314 0 6-2.686 6-6s-2.686-6-6-6zM12 15.75c-2.071 0-3.75-1.679-3.75-3.75s1.679-3.75 3.75-3.75 3.75 1.679 3.75 3.75-1.679 3.75-3.75 3.75z"
                fill="#ffffff"></path>
        </svg>
      </div>

      <!--
      <div v-on:click="toolbarAction('moisture')"
           class="clickable iconfont fg-yellow noselect zoom-ctrl" title="Soil moisture">
        <svg viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg"
             width="12" height="12">
          <path d="M10.132 5.545c-0.771-2.15-2.404-4.080-4.132-5.545-1.729 1.465-3.362 3.395-4.132 5.545-0.477 1.329-0.524 2.772 0.147 4.048 0.772 1.466 2.328 2.407 3.985 2.407s3.213-0.941 3.985-2.407c0.671-1.275 0.624-2.718 0.147-4.048zM8.657 8.894c-0.513 0.976-1.556 1.606-2.657 1.606-0.646 0-1.272-0.217-1.783-0.594 0.155 0.020 0.312 0.031 0.47 0.031 1.376 0 2.68-0.788 3.321-2.007 0.526-1 0.48-2.037 0.28-2.863 0.171 0.33 0.315 0.659 0.432 0.984 0.265 0.739 0.469 1.832-0.063 2.843z"
                fill="#ffffff"></path>
        </svg>
      </div>
      -->

      <div v-on:click="toolbarAction('statistics')" class="clickable iconfont fg-yellow noselect zoom-ctrl" title="Statistics">
        <svg viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"
             width="12" height="12">
          <path d="M3 21h21v3h-24v-24h3zM6.75 19.5c-1.243 0-2.25-1.007-2.25-2.25s1.007-2.25 2.25-2.25c0.066 0 0.132 0.003 0.197 0.009l2.419-4.031c-0.231-0.353-0.365-0.775-0.365-1.228 0-1.243 1.007-2.25 2.25-2.25s2.25 1.007 2.25 2.25c0 0.453-0.135 0.875-0.365 1.228l2.419 4.031c0.065-0.006 0.13-0.009 0.197-0.009 0.050 0 0.1 0.002 0.149 0.005l3.993-6.987c-0.247-0.361-0.392-0.798-0.392-1.268 0-1.243 1.007-2.25 2.25-2.25s2.25 1.007 2.25 2.25c0 1.243-1.007 2.25-2.25 2.25-0.050 0-0.1-0.002-0.149-0.005l-3.993 6.987c0.247 0.361 0.392 0.798 0.392 1.268 0 1.243-1.007 2.25-2.25 2.25s-2.25-1.007-2.25-2.25c0-0.453 0.135-0.875 0.365-1.228l-2.419-4.031c-0.065 0.006-0.13 0.009-0.197 0.009s-0.132-0.003-0.197-0.009l-2.419 4.031c0.231 0.353 0.365 0.775 0.365 1.228 0 1.243-1.007 2.25-2.25 2.25z"
                fill="#ffffff"></path>
        </svg>
      </div>

      <div v-on:click="toolbarAction('timeseries')" class="clickable iconfont fg-yellow noselect zoom-ctrl" title="Time series">
        <svg viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg"
             width="12" height="12">
          <path d="M7.5 0.75c2.899 0 5.25 2.351 5.25 5.25s-2.351 5.25-5.25 5.25v-1.125c1.102 0 2.138-0.429 2.917-1.208s1.208-1.815 1.208-2.917c0-1.102-0.429-2.138-1.208-2.917s-1.815-1.208-2.917-1.208c-1.102 0-2.138 0.429-2.917 1.208-0.599 0.599-0.991 1.351-1.14 2.167h2.182l-2.625 3-2.625-3h1.929c0.364-2.544 2.552-4.5 5.196-4.5zM9.75 5.25v1.5h-3v-3.75h1.5v2.25z"
                fill="#ffffff"></path>
        </svg>
      </div>

      <div v-on:click="toolbarAction('history')" class="clickable iconfont fg-yellow noselect zoom-ctrl" title="History Data">
        <svg viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg"
             width="12" height="12">
          <path d="M6 0c-3.314 0-6 2.686-6 6s2.686 6 6 6 6-2.686 6-6-2.686-6-6-6zM7.72 8.78l-2.47-2.47v-3.311h1.5v2.689l2.030 2.030-1.061 1.061z"
                fill="#ffffff"></path>
        </svg>
      </div>

      <div v-on:click="toolbarAction('crisis')" class="clickable iconfont fg-yellow noselect zoom-ctrl"
           title=" Locust Crisis Grade">
        <svg viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg"
             width="12" height="12">
          <path d="M4.5 0.75h-3.75c-0.413 0-0.75 0.337-0.75 0.75v3.75c0 0.412 0.337 0.75 0.75 0.75h3.75c0.412 0 0.75-0.338 0.75-0.75v-3.75c0-0.413-0.338-0.75-0.75-0.75zM4.5 3.75h-3.75v-0.75h3.75v0.75zM10.5 0.75h-3.75c-0.413 0-0.75 0.337-0.75 0.75v9.75c0 0.413 0.337 0.75 0.75 0.75h3.75c0.413 0 0.75-0.337 0.75-0.75v-9.75c0-0.413-0.337-0.75-0.75-0.75zM10.5 7.5h-3.75v-0.75h3.75v0.75zM10.5 5.25h-3.75v-0.75h3.75v0.75zM4.5 6.75h-3.75c-0.413 0-0.75 0.337-0.75 0.75v3.75c0 0.413 0.337 0.75 0.75 0.75h3.75c0.412 0 0.75-0.337 0.75-0.75v-3.75c0-0.413-0.338-0.75-0.75-0.75zM4.5 9.75h-1.5v1.5h-0.75v-1.5h-1.5v-0.75h1.5v-1.5h0.75v1.5h1.5v0.75z"
                fill="#ffffff"></path>
        </svg>
      </div>

      <div v-on:click="toolbarAction('fullscreen')" class="clickable iconfont fg-yellow noselect zoom-ctrl"
           title="Full Screen">
        <svg viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg"
             width="12" height="12">
          <path d="M12 0h-4.875l1.875 1.875-2.25 2.25 1.125 1.125 2.25-2.25 1.875 1.875z" fill="#ffffff"></path>
          <path d="M12 12v-4.875l-1.875 1.875-2.25-2.25-1.125 1.125 2.25 2.25-1.875 1.875z" fill="#ffffff"></path>
          <path d="M0 12h4.875l-1.875-1.875 2.25-2.25-1.125-1.125-2.25 2.25-1.875-1.875z" fill="#ffffff"></path>
          <path d="M0 0v4.875l1.875-1.875 2.25 2.25 1.125-1.125-2.25-2.25 1.875-1.875z" fill="#ffffff"></path>
        </svg>
      </div>
    </div>
</template>

<script>
export default {
  name: 'Toolbar',
  methods: {
    toolbarAction (data) {
      this.$emit('toolbarMethods', data)
    }
  }
}
</script>

<style scoped>
  .clickable {
    cursor: pointer;
  }
  .fg-yellow {
    color: #fff3e1;
  }
  .noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
  }
  .zoom-ctrl {
    width: 25px;
    height: 25px;
    border-radius: 50px;
    background-color: rgba(68, 65, 65, 0.84);
    margin-bottom: 4px;
    text-align: center;
    align-self: flex-end;
    pointer-events: auto;
    font-size: 17px;
  }

  .zoom-ctrl:hover {
    background-color: rgba(203, 199, 98, 0.6);
  }
</style>
